<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>插值语法</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.5.13/vue.global.js"></script>
    </head>
    <body>
        <div id="app">
            标题：<input type="text" placeholder="输入内容同步到标题" v-model="title"><br>
            内容：<span>{{ question }}</span><br>
            <br>
            姓名：<input type="text" placeholder="输入姓名" v-model="person.name"><br>
            年龄：<input type="number" placeholder="输入年龄" v-model="person.age"><br>
            姓名：<span>{{ person.name }}</span><br>
        </div>
        <script>
            const { createApp } = Vue
            const app = createApp({
                data() {
                    return {
                        title: '',
                        question: '',
                        person: {
                            name: 'cgs',
                            age: 18
                        }
                    }
                },

                // 在选项式API中，我们可以通过watch选项配置一个函数来监听某个响应式属性的变化。监听回调函数默认在数据发生变化时回调，且接收新值和旧值两个参数。
                watch: {
                    title(newVal, oldVal) {
                        console.log('title属性发生变化了，新值是：' + newVal + '，旧值是：' + oldVal)

                        // 直接更新DOM
                        document.title = newVal

                        // 模拟异步操作获取对应的答案
                        setTimeout(() => {
                            const question = `${newVal}最匹配的问题？` // 模板字符串
                            this.question = question
                        }, 1000)
                    },

                    // watch选项不仅可以监听data对象中外部的属性，还可以监听其内部的属性。现有一个person对象，内部有name和age两个属性，我们使用watch选项对name属性进行监听。
                    'person.name'(newVal, oldVal) {
                        console.log('person.name属性发生变化了，新值是：' + newVal + '，旧值是：' + oldVal)
                        alert(`姓名发生变化了, 新值是：${newVal}，旧值是：${oldVal}`)
                    },
                },

                computed: {
                   
                },

                methods: {
                    
                }
            })

            const vm = app.mount('#app')
        </script>
    </body>
</html>